<template>
  <div class="page" id="s_scroll">
    <BasaicAnchorTab :tabs="tabs" :tab-props="tabsProps" parent-id="s_scroll">
      <!-- 模块id需与tabs对应 -->
      <div id="id1">
        <n-button type="primary">id1</n-button>
        <div
          style="
            width: 360px;
            margin-top: 24px;
            padding: 10px;
            min-height: 280px;
            background: #ffffff;
            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.07);
          "
        >
          <!-- 简约版 -->
          <BasicTagEllipsis :tags="tags"></BasicTagEllipsis>

          <!-- 普通版 -->
          <BasicTagEllipsis :tags="tags" use-type="normal">
            <template #diyTooltip>
              <div style="text-align: center">
                《秦皇岛》<br />住在我心里孤独的<br />孤独的海怪 痛苦之王<br />开始厌倦 深海的光
                停滞的海浪
              </div>
            </template>
          </BasicTagEllipsis>

          <!-- <BasicTextEllipsis
            text="这是一个省略文本这是一个省略文本这是一个省略文本这是一个省略文本这是一个省略文本这是一个省略文本这是一个省略文本这是一个省略文本这是一个省略文本"
          >
            <template #diyTooltip>
              <div style="text-align: center; color: #ffffff">
                《秦皇岛》<br />住在我心里孤独的<br />孤独的海怪 痛苦之王<br />开始厌倦 深海的光
                停滞的海浪
              </div>
            </template>
          </BasicTextEllipsis> -->
          <BasicTextEllipsis
            :prop-line-clamp="3"
            expand-text="更多"
            text="得单独得单独得单独得单住在我心里孤独的独得单独得单独得住在我心里孤独的单独得单独得住在我心里孤独住在我心里孤独的的单独得单独得单独得单独得单独得单独得单独得单独得单独得单独"
          >
            <template #diyTooltip>
              <div style="text-align: center; color: #ffffff">
                《秦皇岛》<br />住在我心里孤独的<br />孤独的海怪 痛苦之王<br />开始厌倦 深海的光
                停滞的海浪
              </div>
            </template>
          </BasicTextEllipsis>
        </div>
      </div>
      <div id="id2">
        <n-button type="primary">id2</n-button>
      </div>
      <div id="id3"><n-button type="primary">id3</n-button></div>
      <div id="id4"><n-button type="primary">id4</n-button></div>
      <div id="id5"><n-button type="primary">id5</n-button></div>
    </BasaicAnchorTab>
  </div>
</template>

<script setup lang="ts">
import { AnchorTab } from '@/components/basaicAnchorTab/types'
import { TabsProps } from 'naive-ui'
const tabs = ref<AnchorTab.TabItems[]>([
  {
    name: 'tab1',
    tab: 'tab1',
    id: 'id1'
  },
  {
    name: 'tab2',
    tab: 'tab2',
    id: 'id2'
  },
  {
    name: 'tab3',
    tab: 'tab3',
    id: 'id3'
  },
  {
    name: 'tab4',
    tab: 'tab4',
    id: 'id4'
  },
  {
    name: 'tab5',
    tab: 'tab5',
    id: 'id5'
  }
])

const tabsProps: TabsProps = {}

const tags = ref([
  '高新技术企业',
  '龙头企业',
  '规上企业',
  '专精特新企业',
  '上市企业',
  '高新技术企业',
  '龙头企业',
  '规上企业',
  '专精特新企业',
  '上市企业'
])
</script>

<style lang="less" scoped>
.page {
  width: 1200px;
  height: 100vh;
  margin: auto;
  background-color: rgba(0, 0, 0, 0.1);
  padding-top: 300px;
  overflow-y: auto;
}
#id1,
#id2,
#id3,
#id4,
#id5 {
  width: 100%;
  height: 500px;
  padding-top: 40px;
}
</style>
